<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>短租排序</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/css/shortrent.shortrent.css">
    <script type="application/javascript" src="../static/js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../static/js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../static/layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body id="app">
<div data-v-67ef3a4a class="csdheader">
    <div data-v-67ef3a4a class="layout clear">
        <div data-v-67ef3a4a id="username" class="left csdnav">
            <label data-v-67ef3a4a>
                <a data-v-67ef3a4a href="#">你好，</a>{{username}}
                <a data-v-67ef3a4a href="javascript:void register" class="colorRed">/</a>
                <a data-v-67ef3a4a href="/loginout" class="colorRed" style="margin-right: 10px;">[退出]</a>
            </label>


            <a data-v-67ef3a4a="" href="#mobileZuChe">手机租车</a>
            <a data-v-67ef3a4a="" href="helpCenter.html">帮助中心</a>
        </div>
        <div data-v-67ef3a4a="" class="right phone">
            <div data-v-67ef3a4a="" class="typeTab">
                <a data-v-67ef3a4a="" href="" style="color: rgb(199, 0, 11);">中文</a>&nbsp;/&nbsp;
                <a data-v-67ef3a4a="" href="">English</a>
            </div>
            <div data-v-67ef3a4a="" class="menu">
                <a data-v-67ef3a4a="" href="/mymain/mymain.html">我的车速递</a>
            </div>
            <div data-v-67ef3a4a="">
                <i class="layui-icon layui-icon-cellphone" style="font-size:14px;  color:#c6000f;"></i>
                <span data-v-67ef3a4a="">400-919-8000</span>
            </div>
        </div>

    </div>
</div>


<div data-v-39f7f629 class="csdnav">
    <div data-v-39f7f629="" class="layout clear">
        <div data-v-39f7f629="" class="left logo">
            <a data-v-39f7f629="" href="../index.html">
                <img data-v-39f7f629=""
                     src="">
            </a>
        </div>
        <div data-v-39f7f629="" class="left navCom">
            <ul data-v-39f7f629="">
                <li data-v-39f7f629="">

                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/activity.html" target="_self">优惠活动</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/joinWork.html" target="_blank" class="">加盟合作</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/netCar.html" target="_blank"
                       class="">网约车</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/longRent.html" target="_blank" class="">企业长租</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="shortrent.html" target="_self" class="colorRed">短租自驾</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="/pagehome/loginsuccess.html" target="_self">
                        <span data-v-39f7f629="">首页</span></a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="selCarMsg">
    <div class="selCarMsgCom">
        <div class="Msg">取车地址：{{getcitys}}</div>
    </div>

    <div class="selCarMsgCom">
        <div class="Msg">还车地址：{{backcitys}}</div>
    </div>
</div>


<div class="carListTab">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">按租金排序</li>
            <li>按热度排序</li>
        </ul>
        <div class="layui-tab-content">


            <div class="layui-tab-item layui-show">
                <!--for循环这段代码-->

                <div class="item clear" id="carlist">
                    <div class="thisPlace clear" id="carli" v-for="site in sites">
                        <div class="itemCarImg left">
                            <img :src="site.picture">
                        </div>
                        <div class="itemCarMsg left">
                            <h1 id="sitename">{{site.name}}</h1>
                            <p id="sitetype">{{site.type}}</p>
                            <p id="sitenum">{{site.sitnum}}座</p>
                        </div>
                        <div class="itemPriceMsg left">
                            <div class="itemPriceMsgC left">
                                <p class="p1">
                                    <span id="siteprice">{{site.price}}</span>/日均
                                </p>
                            </div>
                            <div class="carLiBao">5天以上立减 5元/天</div>
                        </div>

                        <div class="itemBtn left">
                            <button class="butt" @click="selectCar(site.id)">预定</button>
                        </div>
                    </div>
                </div>

            </div>


            <div class="layui-tab-item">


                <div class="item clear" id="carlis">
                    <div class="thisPlace clear" id="carl" v-for="site in cars">
                        <div class="itemCarImg left">
                            <img :src="site.picture">
                        </div>
                        <div class="itemCarMsg left">
                            <h1>{{site.name}}</h1>
                            <p>{{site.type}}</p>
                            <p>{{site.sitnum}}座</p>
                        </div>
                        <div class="itemPriceMsg left">
                            <div class="itemPriceMsgC left">
                                <p class="p1">
                                    <span>{{site.price}}</span>/日均
                                </p>
                            </div>
                            <div class="carLiBao">5天以上立减 5元/天</div>
                        </div>

                        <div class="itemBtn left">
                            <button class="butt" @click="selectCar(site.id)">预定</button>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>


</div>


<script type="text/javascript">
    var app = new Vue({
        el:'#username',
        data:{
            username:''
        }
    });

    var vm = new Vue({
        el: '.selCarMsg',
        data: {
            getcitys: '',
            backcitys: ''
        },
    });

    var vm2 = new Vue({
        el: '#carlist',
        data: {
            sites: [],
        },
        methods: {
            selectCar: function (id) {
                window.location.href = "../order/ordersubmit.html" + window.location.search + "&cid=" + id;
            }
        },

    });

    var vm3 = new Vue({
        el: '#carlis',
        data: {
            cars: [],
        },

    });

</script>

<script type="text/javascript">
    $(function () {
        param = window.location.search;
        getid = param.split("&")[0].split("=")[1];
        backid = param.split("&")[1].split("=")[1]
        $.ajax({
            type: "get",
            url: "/selectById" + getid,
            dataType: "json",
            success: function (data) {
                    vm.getcitys = data.name;
            },
            error: function () {
                // alert("ajax加载失败");
            }
        });
        $.ajax({
            type: "get",
            url: "/selectById" + backid,
            dataType: "json",
            success: function (data) {
                vm.backcitys = data.name;
            },
            error: function () {
                // alert("ajax加载失败");
            }

        });

        $.ajax({
            url:'/loginName',
            type:'get',
            success:function (res){
                app.username=res;
            }
        })
    })

</script>

<script type="text/javascript">


    $(function () {
        $.ajax({
            type: "get",
            url: "/car"+getid,
            success: function (data) {
                console.log(data);
                vm2.sites=data.sites;
                vm3.cars=data.cars;
            },
            error: function () {
                alert("ajax加载失败");
            }

        });
    })

</script>

<!--<script type="text/javascript">-->
<!--    $(function () {-->
<!--        var getid = window.location.search;-->
<!--        $.ajax({-->
<!--            type: "get",-->
<!--            url: "/car",-->
<!--            // dataType:"json",-->
<!--            success: function (data) {-->
<!--                // if(data.code==1) {-->
<!--                vm3.cars = data;-->

<!--                // }-->
<!--            },-->
<!--            error: function () {-->
<!--                // alert("ajax加载失败");-->
<!--            }-->

<!--        })-->
<!--    })-->

<!--</script>-->


<script type="text/javascript">

    function selectCar(cid) {

        window.location.href = "../order/ordersubmit.html?getid="+getid+"&backid="+backid+"&cid=" + cid;

    }

</script>


<script>
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块


    });
</script>


</body>
</html>